<template>
	<view>
		<scroll-view @scroll="scroll" @scrolltolower="scrolltolower" lower-threshold="10" :scroll-y="isSticky" :style="{ height: props.scrollViewHeight + 'px' }">
			<view class="">
				<view class="tab">
					<scroll-view class="tab_scroll" scroll-x scroll-with-animation :scroll-into-view="tabbar.intoIndex">
						<view class="tab_flex">
							<view
								:id="`item${index}`"
								class="items"
								:class="index == tabbar.active ? 'actitems' : ''"
								v-for="(item, index) in tabbar.tabbarList"
								:key="index"
								@click="tabbarChange(index)"
							>
								{{ item.name }}
								<span v-if="index == 0">{{ total }}</span>
							</view>
						</view>
					</scroll-view>
				</view>
				<view v-if="tabbar.active == 0">
					<active1 v-model:isSticky="isSticky" :userId="userData.id" ref="active1Ref" @update:value="handleValueUpdate"></active1>
				</view>
				<view v-if="tabbar.active == 1">
					<active2 v-model:isSticky="isSticky" :userId="userData.id" ref="active2Ref"></active2>
				</view>
				<view v-if="tabbar.active == 2">
					<active3 v-model:isSticky="isSticky" ref="active3Ref"></active3>
				</view>
				<view v-if="tabbar.active == 3">
					<active4 v-model:isSticky="isSticky" ref="active4Ref"></active4>
				</view>
				<view v-if="tabbar.active == 4">
					<active5 v-model:isSticky="isSticky" ref="active5Ref"></active5>
				</view>
				<view v-if="tabbar.active == 5">
					<active6 v-model:isSticky="isSticky" ref="active6Ref"></active6>
				</view>
				<!-- 		<view class="kong">
					<image src="/static/k4.png" mode=""></image>
					<view class="text">暂无数据</view>
				</view> -->
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, computed, nextTick, watch } from 'vue';
import { onLoad, onShow, onReachBottom, onPageScroll } from '@dcloudio/uni-app';
import active1 from './activityRules.vue';
import active2 from './member.vue';
import active3 from './trialMembership.vue';
import active4 from './activityTemplate.vue';
import active5 from './basicInformation.vue';
import active6 from './transfer.vue';
const tabbar = reactive({
	tabbarList: [
		{
			name: '活动管理'
		},
		{
			name: '成员管理'
		},
		{
			name: '体验会员'
		},
		{
			name: '活动模板'
		},
		{
			name: '基础信息'
		},
		{
			name: '转会列表'
		}
	],
	active: 0,
	intoIndex: ''
});
const tabbarChange = (index) => {
	tabbar.intoIndex = 'item' + index;
	tabbar.active = index;
};
const props = defineProps({
	initialIsSticky: {
		type: Boolean,
		default: false
	},
	scrollViewHeight: {},
	userData: {}
});
const isSticky = ref(false);
watch(
	() => props.initialIsSticky, // 监听的目标：外部传入的 initialIsSticky
	(newVal) => {
		isSticky.value = newVal; // 同步到内部变量
		uni.setStorageSync('initialIsSticky', newVal);
	},
	{ immediate: true } // 立即执行一次，初始化时同步初始值
);
const total = ref(0);
const handleValueUpdate = (newValue) => {
	total.value = newValue;
	console.log('收到子组件的值11:', newValue);
};
const active1Ref = ref(null);
const active2Ref = ref(null);
const active3Ref = ref(null);
const active4Ref = ref(null);
const active5Ref = ref(null);
const active6Ref = ref(null);
const scroll = (e) => {
	if (tabbar.active == 0) {
		active1Ref.value.handleScroll(e.detail.scrollTop);
	}
};
const scrolltolower = () => {
	const refMap = {
		0: active1Ref,
		1: active2Ref,
		2: active3Ref,
		3: active4Ref,
		4: active5Ref,
		5: active6Ref
	};
	const currentRef = refMap[tabbar.active];
	if (currentRef?.value?.loadMore) {
		currentRef.value.loadMore();
	}
};
</script>

<style lang="scss" scoped>
.kong {
	width: 360rpx;
	margin: 128rpx auto;
	image {
		width: 360rpx;
		height: 232rpx;
	}
	.text {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #979797;
		margin-top: 50rpx;
		text-align: center;
	}
}
.tab {
	width: 750rpx;
	height: 72rpx;
	background: #f3f0e8;
	position: sticky;
	z-index: 4;
	top: 0%;
	overflow: hidden; /* 限制滚动范围 */
	.tab_scroll {
		width: 100%;
		height: 100%;
		white-space: nowrap; /* 防止内部元素换行 */
		// 隐藏横向滚动条（可选）
		&::-webkit-scrollbar {
			display: none;
		}
		scrollbar-width: none;
	}

	.tab_flex {
		display: inline-flex; // 让容器宽度随内容撑开
		height: 100%;
		align-items: center;
		padding: 0 10rpx; // 左右留一点边距
	}

	.items {
		min-width: 160rpx; // 每个选项最小宽度
		padding: 0 20rpx;
		height: 100%;
		line-height: 72rpx; // 垂直居中
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #717171;
		text-align: center;
		white-space: nowrap; // 文字不换行
	}
	.actitems {
		font-weight: bold;
		color: #75613e;
	}
}
</style>
